<template>
<div>
    <!-- 无子级-->
    <el-menu-item :index="item.url"  v-if="!item.child">
        <el-icon><i class="iconfont" :class="item.iconFontClass" v-if="item.iconFontClass"></i></el-icon>
        <span>{{ item.name }}</span>
    </el-menu-item>
    <!--  有子级-->
    <el-sub-menu :index="item.url"  unique-opened="true" v-else>
        <template #title>
            <el-icon><i class="iconfont" :class="item.iconFontClass" v-if="item.iconFontClass"></i></el-icon>
<!--          <el-icon><i class="iconfont icon-ChatGPT-blue"></i></el-icon>-->
            <span>{{item.name}}</span>
        </template>
        <el-menu-item-group>
            <MenItem v-for="sub in item.child" :key="sub.url" :item="sub" :url="sub.url" />
        </el-menu-item-group>
    </el-sub-menu>
</div>
</template>

<script setup>

const props = defineProps(["item"])

</script>

<style scoped lang="less">
@import "src/assets/css/common.less";
@import "//at.alicdn.com/t/c/font_4145508_zw64dsjcbs9.css";
.iconfont{
    font-size: @NavMenuItemIconFontSize;
}
span{
    font-size: @NavMenuItemFontSize;
}
</style>